<template>
  <div class="cmt-container">
    <h3>发表评论</h3>
    <hr>
    <textarea placeholder="请输入内容，最多不超过140个字符" maxlength="140" v-model='msg'></textarea>
    <mt-button type='primary' size='large' @click='postcomments'>发表评论</mt-button>
    <div class="cmt-list">
      <div class="cmt-item" v-for='(item,i) in pinglun' :key='item.addTime'>
        <div class="cmt-title">
          第{{ i+1 }}楼&nbsp;&nbsp;用户：{{ item.username }}&nbsp;&nbsp;发表时间：{{ item.addTime }}
        </div>
        <div class="cmt-body">
          {{ item.content }}
        </div>
      </div>
    </div>
    <!-- <mt-button type='danger' size='large' plain >加载更多</mt-button> -->
  </div>
</template>
<script>
import {Toast} from 'mint-ui'
export default {
  data(){
    return {
      pinglun:{},
      msg:''
    }
  },
  methods:{
    getcomments(){
      this.$http.get("getcomments")
        .then(result=>{
          // console.log(result)
          if(result.status === 200){
            if(this.its==1){
              this.pinglun = result.body.piccomments[this.id-1].content
            }else if(this.its == 0){
              this.pinglun = result.body.comments[this.id-1].content
            }
            // this.pinglun = result.body.comments[this.id-1].content
            // console.log(this.pinglun)
          }else{
            Toast('获取评论失败...')
          }
        })
    },
    postcomments(){
      if(this.msg.trim().length === 0){
        return Toast('评论不能为空')
      }
      this.$http.post('api/postcomment/'+this.id,
      {
        its:this.its,
        content:this.msg.trim()
      })
        .then(result=>{
          this.msg = ''
          this.getcomments()
        })
    }
  },
  created(){
    this.getcomments()
  },
  props:["id","its"]
}
</script>
<style lang="scss" scoped>
  .cmt-container{
    h3{
      font-size: 18px;
    }
    textarea{
      font-size: 14px;
      height: 85px;
      margin:0;

    }
    .cmt-list{
      margin: 5px 0;
      .cmt-item{
        font-size: 13px;
        .cmt-title{
          background:#ccc;
          line-height: 30px;
        }
        .cmt-body{
          line-height: 35px;
          text-indent: 2em;
        }
      }
    }
  }
</style>